import React, { Component } from 'react';
import { connect } from 'dva';
import { Modal, Select, Button, Table, DatePicker, Input } from 'antd';
import moment from 'moment';
import styles from './OrderList.less';

// const Option = Select.Option;

@connect(({ OrderList }) => ({
  orderList: OrderList.orderList,
}))
class OrderList extends Component {
  state = {
    page_num: 1,
    page_size: 10,
    type: 0,
    modalVisibility: false,
  };

  // updateData() {
  //   const { dispatch } = this.props;
  //   dispatch({
  //     type: 'SystemPref/queryorderList',
  //     payload: {
  //       page_num: this.state.page_num,
  //       page_size: 10,
  //     },
  //   });
  // }

  componentDidMount() {
    const { dispatch } = this.props;
    this.setState({ loading: false });
    // this.updateData();
    dispatch({
      type: 'OrderList/getOrderList',
      payload: {
        page_num: 1,
        page_size: 10,
      },
    });
  }

  componentDidUpdate(prevProps) {
    // if (prevProps.updateDidFinish !== this.props.updateDidFinish) {
    //   this.updateData();
    // } else if (prevProps.orderList !== this.props.orderList) {
    //   this.setState({ selectedRows: [] });
    // }
  }

  render() {
    let { orderList } = this.props;
    console.log('orderList', orderList);
    const cols = [
      {
        title: '订单编号',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '产品名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '状态',
        dataIndex: 'type',
        key: 'type',
      },
      {
        title: '购买凭证',
        dataIndex: 'voucher',
        key: 'voucher',
      },
      {
        title: '操作',
        key: 'operations',
        dataIndex: 'id',
        render: (text, row, index) => (
          <a
            onClick={() => {
              handleEditClick(index);
            }}
          >
            编辑
          </a>
        ),
      },
    ];

    let pager = {
      defaultCurrent: 1,
      total: orderList.total_count,
      onChange: (page, pageSize) => {
        this.setState({ page_num: page }, () => {
          this.updateData();
          this.setState({ selectedRows: [] });
        });
      },
    };

    let handleEditClick = index => {
      // this.setState({
      //   modalId: orderList.data_list[index].id,
      //   modalName: orderList.data_list[index].name,
      //   modalEmailServer: orderList.data_list[index].email_server,
      //   modalEmail: orderList.data_list[index].email,
      //   modalUsers: orderList.data_list[index].relation_account_id.split(','),
      //   modalPassword: orderList.data_list[index].password,
      //   modalVisibility: true,
      //   modalOperation: 'update',
      // });
    };

    let handleDeleteClick = () => {
      // if (this.state.selectedRows.length > 0) {
      //   const { dispatch } = this.props;
      //   let res = [];
      //   for (let i = 0; i < this.state.selectedRows.length; i++) {
      //     res.push(orderList.data_list[this.state.selectedRows[i]].id);
      //   }
      // }
    };

    let handleTableSelectChange = selectedRows => {
      console.log(selectedRows);
      this.setState({ selectedRows });
    };

    let clearModalValues = () => {
      // this.setState({
      //   modalId: '',
      //   modalName: '',
      //   modalEmailServer: '',
      //   modalEmail: '',
      //   modalPassword: '',
      //   modalUsers: [],
      //   modalVisibility: false,
      // });
    };

    let handleModalOk = e => {
      // const { dispatch } = this.props;
      // if (this.state.modalOperation === 'new') {
      //   dispatch({
      //     type: 'SystemPref/addSmtpEntry',
      //     payload: {
      //       name: this.state.modalName,
      //       email_server: this.state.modalEmailServer,
      //       email: this.state.modalEmail,
      //       password: this.state.modalPassword,
      //       relation_account_id: this.state.modalUsers,
      //     },
      //   });
      // } else {
      //   dispatch({
      //     type: 'SystemPref/updateSmtpEntry',
      //     payload: {
      //       id: this.state.modalId,
      //       name: this.state.modalName,
      //       email_server: this.state.modalEmailServer,
      //       email: this.state.modalEmail,
      //       password: this.state.modalPassword,
      //       relation_account_id: this.state.modalUsers,
      //     },
      //   });
      // }
      // clearModalValues();
    };

    let handleModalCancel = e => {
      clearModalValues();
    };

    let handleInputChange = value => {
      console.log(value);
      this.setState(value);
    };

    let generateUserList = () => {
      let res = [];
      if (userList) {
        for (let i = 0; i < userList.length; i++) {
          res.push(
            <Option value={userList[i].relation_account_id} key={'user' + i}>
              {userList[i].name}
            </Option>
          );
        }
      }
      return res;
    };

    return (
      <div style={{ margin: '24px 24px 0' }}>
        <div className={styles.outerWidthLim}>
          <div className={styles.outerHeightLim}>
            <div className={styles.contentCard}>
              <div className={styles.cardHeader}>
                <p className={styles.cardTitle}>订单列表</p>
              </div>
              <div className={styles.cardContent}>
                <Table
                  className={styles.bigTable}
                  columns={cols}
                  dataSource={orderList.data_list}
                  pagination={pager}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default OrderList;
